<template>
  <div class="wrapper">
    <div class="box">
        <div class="logo">
            <img src="@/assets/logo.png" alt="">
        </div>

        <div class="form">
            <el-form  :model="model" :rules="rules" ref="form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input 
                        prefix-icon="el-icon-user-solid" 
                        v-model="model.username"
                        :maxlength="10"
                    ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item  prop="password">
                    <el-input 
                        :maxlength="15"
                        type="password"
                        prefix-icon="el-icon-lock" 
                        v-model="model.password"></el-input>
                </el-form-item>
            </el-form>         
                <div class="buttons">
                    <el-button type="primary" @click="userLogin" :loading="loading">登录</el-button>
                    <el-button class="chong" @click="reset">重置</el-button>
                </div>
        </div> 


    </div>
  </div>
</template>

<script>
import {Logins} from "api/user";
import {getMenus} from "api/rights";

export default {
    name : "Login",
    data() {
        return {
            /**
             * loading
             */
            loading:false,
            /**
             * 登录信息
             */
            model: {
                username:"",
                password:""
            },
            /**
             * 规则
             */
            rules:{
                // 用户名
                username:[
                    {
                        required:true,
                        message:"用户名不能为空"
                    },
                    {
                        max:10,
                        min:3,
                        message:"用户名的长度在3-10个字符"
                    }
                ],
                //密码
                password:[
                    {
                        required:true,
                        message:"密码不能为空"
                    },
                    {
                        max:15,
                        min:6,
                        message:"密码的长度在6-15个字符"
                    }
                ],
            }
        }
    },
    methods:{
        /**
         * 登录
         */
        async userLogin(){
            try {      
                await this.$refs.form.validate();
                this.loading = true;
          
                const data = await Logins(this.model);
                this.$store.commit("setUser",data)
                //获取菜单
                const menus = await getMenus();
                this.$store.commit("setMenus",menus)
                //路由跳转
                this.$router.push({ name: "HomeLayouts" });
            } catch (error) {}
            this.loading = false
        },
        /**
         * 重置
         */
        reset(){
            this.$refs.form.resetFields();
            this.model = {}
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper{
    width: 100%;
    height: 100%;
    background: var(--mainBackColor);
    .box{
        padding: 20px;
        width: 450px;
        height: 300px;
        background: #ffff;
        border-radius: 2px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        .logo{
            width: 130px;
            height: 130px;
            background: white;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translate(-50% , -50%);
            box-shadow:  0 0 10px #ddd;
            border: 10px solid white;
            img{
                background: #eee;
                height: 100%;
                border-radius: 50%;
            }
        }
        .form{
            margin-top: 120px ;
            .buttons{
                margin-left: 280px;
                .chong{
                    background: var(--reseGray);
                    color: white;
                }
            }
        }
    }
}

</style>